import { Component, Ref } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import logoIcon from '@/assets/channel-management/detail/logo-icon.png'

import { Button, Dropdown, MenuItem, Menu, Tabs, TabPane, Tag } from 'ant-design-vue'
import { CaretDownOutlined } from '@ant-design/icons-vue'
import BasicInfoView from './components/BasicInfo'
import SystemSchemeView from './components/SystemScheme'
import CustomerProductsView from './components/CustomerProducts'
import BaoshiPlanView from './components/BaoshiPlan'
import { insureCompanyDetail } from '@/api/insCompany'
import type { InsureCompanyDetailDto } from '@/api/insCompany/types'
import useUserStore from '@/stores/user'
import DialogEditPlanNumber from './components/DialogEditPlanNumber'
import type { AddType } from '@/api/types'


@Component
export class SuperintendentDetail extends Render {

    @Ref() InsureCompanyPlanRef!: typeof BaoshiPlanView

    id = null as null | number

    detailData = {} as InsureCompanyDetailDto

    showDialog = false

    addType = 'add' as AddType

    async initData() {
        const res = await insureCompanyDetail({
            id: this.id as number
        })
        this.detailData = res
    }
    onEdit() {
        this.$router.push({
            path: '/insurance-manage/insurance-company-add',
            query: {
                id: this.id
            }
        })
    }

    onAddNumber() {
        this.showDialog = true
        this.addType='add'
    }

    onRefresh() {
        this.InsureCompanyPlanRef?.reloadPage?.()
    }

    onHandleForbid() {

    }

    mounted() {
        if (this.$route.params?.id) {
            this.id = parseInt(this.$route.params.id as string)
            this.initData()
        }
    }

    renderHead() {
        return (
            <div class="px-24 pt-20px rounded-default bg-white-default">
                {/* divide-y divide-blue-200 */}
                <div class="flex justify-between pb-20">
                    <div class="flex items-center">
                        <img src={ logoIcon } class="w-60 h-60 mr-16" alt="" />
                        <div>
                            <div class="flex items-center">
                                <div class="text-black-light-200 text-lg mr-16">{this.detailData.insureName}</div>
                                <Tag color={this.detailData.enable? 'success' : 'error'}>{this.detailData.enable ? '启用' : '禁用'}</Tag>
                            </div>
                            <div class="text-black-300 text-base mt-4">{this.detailData.code}</div>
                        </div> 
                    </div>
                    <div class="flex items-center">
                        <Dropdown hide-on-click={false}
                            overlay={
                                <Menu>
                                    {useUserStore().hasPermission('client:insurance-manage-company:edit') && <MenuItem class="cursor-pointer" onClick={() => this.onEdit()}>编辑保司</MenuItem>}
                                    {useUserStore().hasPermission('client:insurance-manage-company:addNumber') && <MenuItem class="cursor-pointer" onClick={() => this.onAddNumber()}>新增保单号</MenuItem>}
                                    {useUserStore().hasPermission('client:insurance-manage-company:forbid') && <MenuItem class="cursor-pointer" onClick={() => this.onHandleForbid()}>禁用</MenuItem>}
                                </Menu>
                            }
                        > 
                            <div class="px-12 py-4 border-solid border-gray-light-300 border rounded-sm flex items-center mr-12">
                                <div class="text-base">更多设置</div>
                                <CaretDownOutlined />
                            </div>
                        </Dropdown>
                        
                        <Button type="primary">返回</Button>
                    </div>
                </div>
                <div class="w-full border-1  border-gray-light-400"></div>
                <div class="mt-20 flex">
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">有效方案</div>
                        <div class="mt-12 font-semibold text-xl"></div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">员工在保信息</div>
                        <div class="mt-12 font-semibold text-xl"></div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">客户信息</div>
                        <div class="mt-12 font-semibold text-xl"></div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">案件总数</div>
                        <div class="mt-12 font-semibold text-xl"></div>
                    </div>
                </div>
            </div>
        )
    }
    
    renderTabs() { 
        return (
            <div class="flex-1 px-24 ">
                <Tabs>
                    <TabPane tab="基本信息" key="0">
                        <BasicInfoView detailData={this.detailData}/>
                    </TabPane>
                    <TabPane tab="系统方案" key="1">
                        <SystemSchemeView detailData={this.detailData}/>
                    </TabPane>
                    <TabPane tab="客户产品" key="2">
                        <CustomerProductsView detailData={this.detailData}/>
                    </TabPane>
                    <TabPane tab="保司方案" key="3">
                        <BaoshiPlanView ref="InsureCompanyPlanRef" detailData={this.detailData}/>
                    </TabPane>
                </Tabs>
            </div>
        )
    }

    render() {
        return (
            <div class="flex flex-col h-full ">
                <div class="flex-none">
                    { this.renderHead() }
                </div>
                {/* <div class="flex-1"> */}
                { this.renderTabs() }
                {/* </div> */}
                <DialogEditPlanNumber v-model:show={this.showDialog} insureCompanyId={this.detailData.id} addType={this.addType} onRefresh={this.onRefresh}/>
            </div>
        )
    }
}

export default toNative<{}, {}>(SuperintendentDetail)